<div class="Panel">
    <div class="row Form-tabRow">
        <div class="col-xs-12">
            <div class="List-header">
                <div class="List-title">
                    <div class="List-titleText">{{ instanceGroupName }}</div>
                </div>
                <div class="List-details">
                    <div class="Capacity-details">
                        <p class="Capacity-details--label" translate>Used Capacity</p>
                        <capacity-bar capacity="instanceGroupCapacity" total-capacity="instanceGroupTotalCapacity"></capacity-bar>
                    </div>
                    <div class="RunningJobs-details">
                        <p class="RunningJobs-details--label" translate>Running Jobs</p>
                        <span class="badge List-titleBadge">
                            {{ instanceGroupJobsRunning }}
                        </span>
                    </div>
                </div>
                <div class="List-exitHolder">
                    <button class="List-exit" ng-click="$state.go('instanceGroups')">
                        <i class="fa fa-times-circle"></i>
                    </button>
                </div>
            </div>
            <div class="Form-tabHolder">
                <div class="Form-tab Form-tab--notitle" ng-click="$state.go('instanceGroups.instances.list', {instance_group_id: $stateParams.instance_group_id})" ng-class="{'is-selected': $state.includes('instanceGroups.instances.list')}" translate>INSTANCES</div>
                <div class="Form-tab Form-tab--notitle" ng-click="$state.go('instanceGroups.instances.jobs', {instance_group_id: $stateParams.instance_group_id})" ng-class="{'is-selected': $state.includes('instanceGroups.instances.jobs')}" translate>JOBS</div>
            </div>
        </div>
    </div>
    <div ui-view="list"></div>
</div>
